<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>扫码</title>
    <link href="../css/aui.css" rel="stylesheet" type="text/css">
    <style>
        .aui-bar-nav .aui-pull-left {
            padding: 0;
        }
    .scanner_h .aui-pull-left img {
        width: 2.2rem;
        height: 2.2rem;
    }

    #canvasId {
        position: absolute;
        top: 0;
        left: 0;
    }

    #scaImg {
        position: relative;
        top: 85px;
    }

    #flashlight {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        width: 100%;
        z-index: 9999;
    }

    #flashlight img {
        width: 28px;
        height: auto;
        margin: 0 auto;
    }

    #flashlight p {
        text-align: center;
        font-size: 14px;
        color: #fff;
        margin-top: 20px;
    }

    #scaImg{
      width: 320px;
      height: 320px;
      margin: 0 auto;
    }

    #scaImg img {
        position: absolute;
    }

    #scaImg .sello {
        top: 10%;
        animation: sellow 2s linear infinite alternate
    }

    @keyframes sellow {
        from {
            top: 10%;
        }
        to {
            top: 90%;
        }
    }
    body {
        min-height: 100vh;
        background-color: rgba(0,0,0,0);
    }
    html {
        background: rgba(0,0,0,0);
        background-color: rgba(0,0,0,0);
    }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav scanner_h" id="nvbar-header" style="background:rgba(0,0,0,0.5);height:auto;">
        <div style="height:2.2rem;line-height:2.2rem;">
            <div class="aui-pull-left"><img src="../image/nav_back.png" onclick="fnClosePage()" /> </div>
            <div class="aui-title" style="color:#fff;">扫一扫</div>
            <!-- <div class="aui-pull-right" id="validate" style="display:none;color:#fff;font-size:15px;" onclick="fnOpenTic()">验票记录</div> -->
        </div>
    </header>
    <canvas id="canvasId"></canvas>
    <div id="scaImg">
        <img src="../image/scanner.png" alt="">
        <img class="sello" src="../image/seelow.png">
    </div>
    <div id="flashlight">
        <img src="../image/flashlight.png" alt="" onclick="fnOpenL()">
        <p>对准二维码到框内扫描即可</p>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/service/service-app.js"></script>
<script type="text/javascript" src="../script/service/service-logic.js"></script>
<script type="text/javascript">
var $S;
var USER;
var _type;
apiready = function() {
    USER = USER();
    $S = SERVICE();
    _type = api.pageParam._type;
    // if (_type == "2") {
    //     $api.css($api.byId("validate"), "display:block;")
    // }
    $api.css($api.byId("nvbar-header"), 'padding-top:' + api.safeArea.top + 'px;');
    var canvas = document.getElementById("canvasId");
    var context = canvas.getContext("2d");
    canvas.setAttribute('height', api.frameHeight);
    canvas.setAttribute('width', api.frameWidth);
    context.fillStyle = "rgba(0,0,0,0.5)"; //设置填充色（可以是渐变色或半透明色）
    context.fillRect(0, 0, canvas.width, canvas.height); //填充背景颜色
    var _width = api.frameWidth - 100;
    var _scanImg = $api.byId('scaImg');
    $api.css(_scanImg, 'width:' + _width + 'px;height:' + _width + 'px;');
    var _top = _width + 150 + 20;
    $api.css($api.byId("flashlight"), 'top:' + _top + 'px;');
    context.clearRect(50, 150, _width, _width); //抠出一个矩形区域
};

//打开手电筒
function fnOpenL() {
    api.execScript({
        name: api.winName,
        script: 'fnOpenLight();'
    });
}
//关闭当前页面
function fnClosePage() {
    api.closeWin();
}
</script>

</html>
